<template>
	<!-- https://blog.csdn.net/mike_chen2stockings/article/details/79668659
		https://www.cnblogs.com/yanl55555/p/12544177.html
	  -->
	<div id="slider">
		<div class="window">
			<!-- window图片的框图  -->
			<ul class="container" :style="containerStyle">
				<!-- 这是图片列表，排成一排 -->
				<li>
					<!-- 列表最前面的副图，用于无线滚动 -->
					<img :src="sliders[sliders.length - 1].img" alt="">
				</li>
				<li v-for="(item, index) in sliders" :key="index">
					<img :src="item.img" alt="图片丢失">
				</li>
				<li>
					<!-- 列表最后面的辅助图，它和图1一样，用于无限滚动 -->
					<img :src="sliders[0].img" alt="">
				</li>
			</ul>
			<ul class="direction">
				<!-- 左右两边方向箭头 -->
				<li class="left" @click="move(450, 1)">
					<svg class="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg">
						<path fill="#ffffff"
							d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" />
					</svg>
				</li>
				<li class="right" @click="move(450,-1)">
					<svg class="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg">
						<path fill="#ffffff"
							d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z" />
					</svg>
				</li>
			</ul>
			<ul class="dots">
				<!-- 图片下面的小圆点 -->
				<li v-for="(dot, i) in sliders" :key="i" :class="{dotted: i === (currentIndex - 1)}"
					@click="jump(i + 1)"></li>
			</ul>
		</div>
	</div>


</template>

<script>
	export default {
		name: 'Slider',
		data() {
			return {
				sliders: [{
						img: require('@/assets/png/slider/1.jpg')
					},
					{
						img: require('@/assets/png/slider/2.jpg')
					},
					{
						img: require('@/assets/png/slider/3.jpg')
					},
					{
						img: require('@/assets/png/slider/4.jpg')
					}
				],
				currentIndex: 1,
				distance: -450,
				transitionEnd: true,
				speed: 25

			}
		},
		computed: {
			containerStyle() {
				/*  这里计算属性，用transform来移动整个图片列表 */
				return {
					transform: `translate3d(${this.distance}px, 0, 0)`
				}
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			    init() {
			      this.play()
			      window.onblur = function() { this.stop() }.bind(this)
			      window.onfocus = function() { this.play() }.bind(this)
			    },
			move(offset, direction) {
				direction === -1 ? this.currentIndex += offset / 450 : this.currentIndex -= offset / 450;

				if (this.currentIndex > this.sliders.length) {
					this.currentIndex = 1
				}
				if (this.currentIndex < 1)
					this.currentIndex = this.sliders.length;
				// this.distance += offset * direction;
				// if (this.distance < -1 * 450 * this.sliders.length) {
				// 	this.distance = -450;
				// }
				// if (this.distance > -450) {
				// 	this.distance = -1 * 450 * this.sliders.length;
				// }

				// 加上过渡动画
				const desturetion = this.distance + offset * direction;
				this.animate(desturetion, direction);
			},

			// 过渡动画
			animate(dest, direc) {

				if (this.temp) {
					window.clearInterval(this.temp);
					this.temp = null;
				}

				// 开启定时器
				this.temp = window.setInterval(() => {
					// console.log(dest, this.distance)
					if (direc === -1 && dest < this.distance || direc === 1 && dest > this.distance) {
						this.distance += 30 * direc;
						// console.log('开启定时器中1')
					} else {
						window.clearInterval(this.temp)
						this.temp = null;
						// console.log('关闭定时器')
						this.distance = dest;
						if (dest > -450) {
							this.distance = -450 * this.sliders.length
						}
						if (dest < -450 * this.sliders.length) {
							this.distance = -450
						}
					}

				}, this.speed)
			},
			jump(index) {
				// 获取滑动方向
				const direction = index - this.currentIndex > 0 ? -1 : 1;
				// 获取滑动距离
				const offset = Math.abs((index - this.currentIndex) * 450);
				// 添加时间参数
				const i = Math.abs(index - this.currentIndex);
				this.speed = i > 1 ? this.speed : this.speed / ( i * this.speed);
				this.move(offset, direction)
			},
			// 启动
			play() {
				if(this.temp) {
					window.clearInterval(this.temp);
					this.temp = null;
				}
				this.temp = window.setInterval(() => {
					this.move(450, -1)
				}, 25)
			},
			stop() {
				window.clearInterval(this.temp);
				this.temp = null;
			}


		}
	}
</script>

<style>
	ol,
	ul {
		list-style: none;
	}

	#slider {
		text-align: center;
	}

	.window {
		position: relative;
		width: 450px;
		height: 287px;
		margin: 0 auto;
		overflow: hidden;
	}

	.container {
		display: flex;
		position: absolute;
	}

	li img {
		height: 100%;
	}

	.left,
	.right {
		position: absolute;
		top: 50%;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, .3);
		transform: translateY(-50%);
		/* 元素垂直居中 */
		width: 50px;
		height: 50px;
		cursor: pointer;
	}

	.left {
		left: 3%;
		padding-left: 5px;
		padding-top: 10px;
	}

	.right {
		right: 3%;
		padding-top: 10px;
		padding-right: 5px;
	}

	.dots {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 10px;
	}

	.dots li {
		display: inline-block;
		width: 15px;
		height: 15px;
		border-radius: calc(50%);
		border: 1px solid window;
		margin: 0 3px;
		cursor: pointer;
	}

	.dots .dotted {
		background-color: orange;
	}
</style>
